import Searchbtn from '@/components/Searchbtn/Searchbtn'
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import Top from './ui/Top';
import Main from './ui/Main'
import connect from './connect'
class Index extends Component {
    state = {
        topActiveState:0
    }
    setTopActiveIndex = index => {
        this.setState({topActiveState:index})
    }
    componentDidMount(){
        (this.props.category.length === 0 || this.props.material.length === 0 )&& this.props.getCateDataAction()
    }
    render() {
        let { topActiveState } = this.state
        return (
            <div>
                <Top topActiveState={topActiveState} setTopActiveIndex={this.setTopActiveIndex}/>
                <Searchbtn title="搜索什么菜系" onSelect = { () => this.props.history.push('/search') }/>
                <Main topActiveState={topActiveState} data={ topActiveState === 0? this.props.category:this.props.material }/>
            </div> 
        );
    }
}

export default withRouter(connect(Index));
